<template>
	<div>
	</div>
</template>

<script>
import { Ring } from '@antv/g2plot'
export default {
	props: {
		chartObj: {
			type: Object,
			required: true,
		},
	},
	mounted () {
		this.getChart()
	},
	methods: {
		getChart () {
			console.log( this.chartObj )
			// 环形图
			const ringPlot = new Ring(
				document.getElementById( this.chartObj.chartId ),
				{
					forceFit: true,
					radius: 0.8,
					title: {
						visible: true,
						text: this.chartObj.title,
					},
					data: this.chartObj.data,
					angleField: 'value',
					colorField: 'type',
					description: {
						visible: true,
						text: '单位:TB',
					},
					legend: {
						visible: true,
						position: 'top-left',
						flipPage: true,
						offestY: 30,
					},
					label: {
						visible: true,
						type: 'spider',
					},
				},
			)

			ringPlot.render()
		},
	},
}
</script>

<style scoped lang="less">
</style>
